<template>
  <div class="setting">
    <a-drawer
      title="查看部门架构"
      :placement="placement"
      :closable="false"
      @close="onClose"
      :visible="visible"
      width="31.25rem"
    >
      <!-- <template v-slot:handle>
        <div class="handle" @click="visible = !visible">
          <a-icon :type="visible? 'close': 'setting'"></a-icon>
        </div>
      </template> -->
      <!-- <div>
        <template>
          <div>
            <h2>整体风格定制</h2>
            <a-radio-group 
              name="radioGroup" 
              :value="$route.query.navTheme || 'dark'"
              @change="e => handleSettingChange('navTheme', e.target.value)"
            >
              <a-radio value="dark">黑色</a-radio>
              <a-radio value="light">白色</a-radio>
            </a-radio-group>
            <h2>导航模式</h2>
            <a-radio-group 
            :value="$route.query.navLayout || 'left'" 
            @change="e => handleSettingChange('navLayout', e.target.value)"
            >
              <a-radio value="left">左侧</a-radio>
              <a-radio value="top">顶部</a-radio>
            </a-radio-group>
          </div>
        </template>
      </div> -->
      <!-- antd自带树形结构 -->
      <div>
        <a-tree
          showIcon
          :treeData="treeData"
          :defaultExpandedKeys="['a']"
          :defaultSelectedKeys="['0-0-0']"
        >
          <template slot="custom" >
            <a-tag style="position: absolute;right: -100px;" color="blue">r</a-tag>
          </template>
        </a-tree>
      </div>
      <!-- 手写树形结构 -->
      <!-- <tree-one :treeData="data"></tree-one> -->
      <!-- 按钮组 -->
      <div class="btn-group">
        <a-button @click="showDepartmentModal">新增部门</a-button>
        <a-button style="margin:0 10px;" @click="showEmployeesModal">新增员工</a-button>
        <a-button>查看/修改信息</a-button>
      </div>
    </a-drawer>
    <!-- 新增部门弹窗 -->
    <a-modal
      title="部门信息"
      v-model="isAddDepartment"
      @ok="handleOk"
    >
      <!-- 上级部门 -->
      <div>
        <span class="name">上级部门</span>
        <a-select
          showSearch
          placeholder="请选择上级部门"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="tom">Tom</a-select-option>
        </a-select>
      </div>
      <!-- 部门名称 -->
      <div style="margin-top:20px">
        <span class="name">部门名称</span>
        <a-input style="width: 200px" placeholder="请输入部门名称（20字以内）"/>
      </div>
      <!-- 底部按钮组 -->
      <template slot="footer">
        <div style="display:flex;justify-content:center;">
          <a-button type="danger">删除</a-button>
          <a-button>取消</a-button>
          <a-button type="primary">确定</a-button>
        </div>
      </template>
    </a-modal>
    <!-- 新增员工弹窗 -->
    <a-modal
      title="员工信息"
      v-model="isAddEmployees"
      @ok="handleOk"
      width="720px"
    >
      <div class="infoAndDel">
        <div class="info">员工ID：KSO231929</div>
        <div class="del">删除账号</div>
      </div>
      <!-- 员工组件 -->
      <employess-common />
      <!-- 底部按钮组 -->
      <template slot="footer">
        <div style="display:flex;justify-content:center;">
          <a-button type="danger">暂停使用</a-button>
          <a-button>取消</a-button>
          <a-button type="primary">确定</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
// import TreeOne from '@/components/TreeOne'
import EmployessCommon from './components/EmployessCommon'
import { apiGroupArc } from '@/utils/api'
// const treeData = [
//   {
//     title: '北京凯迪克格兰云天大酒店有限公司',
//     key: 'a',
//     children: [
//       { title: 'Hughes休斯-超级管理员'},
//       { title: 'Grapes格雷普斯', 
//         children: [
//           {
//             title: '格雷-公司管理员', 
//             key: '0-0-0-0',
//           }
//         ]
//       }
//     ],
//   },

// ]
export default {
  props: {
    // 不能直接修改props的值
    isDrawer: {
      type: Boolean,
      default: false
    }
  },
  components: {
    // TreeOne
    EmployessCommon
  },
  data() {
    return {
      // 抽屉状态
      visible: false,
      // 新增部门弹窗状态
      isAddDepartment: false,
      // 新增员工弹窗状态
      isAddEmployees: false,
      placement: 'right',
      navTheme: 'dark',
      navLayout: 'left',
      // 部门架构数据
      treeData: [],
      data: [
        {
          name: 'home',
          path: '/home',
          isExpand: false,
          meta: { text: '首页' }
        },
              {
                name: 'manage',
                path: '/manage',
                isExpand: false,
                meta: {text: '系统管理'},
                children: [
                  {
                    name: 'staff',
                    path: 'staff',
                    isExpand: false,
                    meta: {text: '员工管理', name: '超级管理员'}
                  },
                  {
                    name: 'role',
                    path: 'role',
                    isExpand: false,
                    meta: {text: '角色管理', name: '公司管理员'}
                  },
                  {
                    name: 'auth',
                    path: 'auth',
                    isExpand: false,
                    meta: {text: '权限管理'}
                  },
                  {
                    name: 'daily',
                    path: 'daily',
                    isExpand: false,
                    meta: {text: '日常管理'},
                    children: [
                      {
                        name: 'attendance',
                        path: 'attendance',
                        isExpand: false,
                        meta: {text: '考勤管理'},
                      },
                      {
                        name: 'performance',
                        path: 'performance',
                        isExpand: false,
                        meta: {text: '绩效管理'}
                      }
                    ]
                  }
                ]
              },
              {
                name: 'finance',
                path: '/finance',
                isExpand: false,
                meta: {text: '财务管理'},
                children: [
                  {
                    name: 'income',
                    path: 'income',
                    isExpand: false,
                    meta: {text: '收入管理'},
                  },
                  {
                    name: 'expense',
                    path: 'expense',
                    isExpand: false,
                    meta: {text: '支出管理'},
                  }
                ]
              }
            ]
    }
  },
  watch: {
    isDrawer(val) {
      this.visible = val
    }
  },
  mounted() {
    this.getGroupArc()
  },
  methods: {
    // 关闭抽屉
    onClose() {
      this.visible = false
      this.$emit('upDrawer', this.visible)
    },
    // 新增部门弹窗状态
    showDepartmentModal() {
      this.isAddDepartment = true
    },
    // 新增员工弹窗状态
    showEmployeesModal() {
      this.isAddEmployees = true
    },
    // 部门架构
    getGroupArc() {
      apiGroupArc().then(res => {
        if(res.code === 10000) {
          // window.console.log('qqqqqqq',res.data.children)
          this.treeData = res.data.children
        }
      })
    },
    handleOk(e) {
      window.window.console.log(e);
      this.isAddDepartment = false
    },
    handleSettingChange(type, value) {
      window.window.console.log(type, value, this.$route.query)
      this.$router.push({ query: {...this.$route.query, [type]: value}  })
    },
    onSelect (selectedKeys, info) {
      window.window.console.log('selected', selectedKeys, info)
    },
    onCheck (checkedKeys, info) {
      window.window.console.log('onCheck', checkedKeys, info)
    },
    handleChange (value) {
      window.window.console.log(`selected ${value}`);
    },
    handleBlur() {
      window.window.console.log('blur');
    },
    handleFocus() {
      window.window.console.log('focus');
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  },

}
</script>
<style lang="less" scoped>
  .handle {
    position: absolute;
    top: 240px;
    right: 300px;
    width: 48px;
    height: 48px;
    background: #1890ff;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 48px;
    border-radius: 3px 0 0 3px;
  }
  .btn-group {
    width: 100%;
    position: absolute;
    bottom: 35px;
    margin-left: 20px;
    // border: 1px solid red;
  }
/deep/ .ant-tree-node-content-wrapper {
    position: relative;
}
/deep/ .ant-tree-iconEle {
  display: inline!important;
}
.name {
    margin-right: 20px;
}
.infoAndDel {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .info {
    color: #333333;
  }
  .del {
    color: #F03535;
    border-bottom: 1px solid #F03535;
    cursor: pointer;
  }
}

</style>